// App.jsx
import { defineComponent, h, ref } from "vue";
import MyComponent from "./MyComponent.jsx";

export default defineComponent({
  name: "App",
  setup() {
    const items = ref([
      {
        id: "1",
        text: "kkx",
      },
      {
        id: "2",
        text: "kklt",
      },
      {
        id: "3",
        text: "kxmd",
      },
    ]);
    return () => (
      <div>
        <h1>KKX in Vue 3</h1>
        <MyComponent
          customClass="my-custom-class"
          customStyle={{ color: "skyblue", fontSize: "20px" }}
          message="Hello, KKX!"
        >
          {{
            default: () => <p><span style={{fontWeight:600}}>default：</span>This is a default slot content.</p>,
            footer: (scope) => <span>{scope.text}</span>,
            bar: () => [
              <span style={{ color: "#eb4b4b", fontSize: "30px" }}>one</span>,
              <span>two</span>,
            ],
          }}
        </MyComponent>
        <ul>
          {items.value.map(({ id, text }) => {
            return <li key={id}>{text}</li>;
          })}
        </ul>
      </div>
    );
  },
});
